<template>
	<view class="container">
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :current="current" @change="swiperChange">
				<swiper-item v-for="(item, index) in blist" :key="index">
					<view class="swiper-item" v-if="item.type == 'video'">
						<video :src="http + item.url" object-fit="fill"></video>
					</view>
					<view class="swiper-item" v-else>
						<image :src="http + item.url" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="banner-bottom">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="item" :class="{ on: current == index }" v-for="(item, index) in blist" :key="index" @click="scrollChange(index)">
					<image :src="http + item.url + '?x-oss-process=video/snapshot,w_0,h_0,t_0,f_jpg,m_fast,ar_auto'" mode="aspectFill" v-if="item.type == 'video'"></image>
					<image :src="http + item.url" mode="aspectFill" v-else></image>
				</view>
			</scroll-view>
		</view>
		<view class="mian">
			<view class="title-price u-flex u-col-center u-row-between">
				<view class="l">
					{{ data.title }}
				</view>
				<view class="r">{{ data.sales_price }}元</view>
			</view>
			<view class="tips">
				<text v-for="(item2, index2) in data.label_arr" :key="index2">{{ item2 }}</text>
			</view>
		</view>
		<view class="mian">
			<view class="title">游戏说明</view>
			<view class="body">
				<u-parse :content="content1"></u-parse>
			</view>
		</view>
		<view class="mian">
			<view class="title">回收说明</view>
			<view class="body">
				<u-parse :content="content2"></u-parse>
			</view>
		</view>
		<view class="footer u-flex u-col-center u-row-between">
			<view class="l u-flex u-col-center">
				<contact-button tnt-inst-id="iA3_QVo5" scene="SCE01262333" size="20" color="#333" icon="/static/image/kf.png" />
				<image src="../../static/image/fx.png" mode="aspectFill" @click="showSharePanel"></image>
			</view>
			<view v-if="data.sell_switch == 1" class="r" @click="buyOpen" style="margin-right: 30rpx">购买</view>
			<view v-if="data.switch == 1" class="r" @click="open">卖出</view>
		</view>

		<!-- 卖出弹窗 -->
		<u-popup :show="show" :round="10" mode="bottom" closeable @close="close" @open="open">
			<view class="pop-buy">
				<view class="title">{{ data.title }}（卖出）</view>
				<view class="list">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="item" v-for="(item, index) in specList" :key="index">
							<view class="t">
								{{ item.name }}
							</view>
							<view class="c u-flex u-col-center u-row-between">
								<view
									class="i"
									:class="{ on: index2 == item.sindex }"
									v-for="(item2, index2) in item.child"
									:key="index2"
									@click="navChange(item, index, item2, index2)"
								>
									{{ item2 }}
								</view>
							</view>
						</view>
						<view class="item" v-if="data.mountings">
							<view class="t">请选择带配件情况（多选）必选：</view>
							<view class="c u-flex u-col-center u-row-between">
								<view class="i" :class="item.active ? 'on' : ''" v-for="(item, index) in data.mountings" :key="index" @click="changMountings(item)">
									{{ item.title }}
								</view>
							</view>
						</view>
						<view class="item">
							<view class="t">选择验货服务费</view>
							<view class="c u-flex u-col-center u-row-between">
								<view class="i" :class="{ on: type == 1 }" @click="changeType(1)">在我家买的-{{ price1 }}元</view>
								<view v-if="data.is_receive_other == 1" class="i" :class="{ on: type == 2 }" @click="changeType(2)">在别人家买的-{{ price2 }}元</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="total">
					预计可获得
					<text>{{ total(specList, specTableList, type) }}</text>
					元
				</view>
				<view class="btn" @click="submit">加入回收袋</view>
			</view>
		</u-popup>

		<!-- 购买弹窗 -->
		<u-popup :show="buyShow" :round="10" mode="bottom" closeable @close="buyClose" @open="buyOpen">
			<view class="pop-buy">
				<view class="title">{{ data.title }}（购买）</view>
				<view class="list">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="item" v-for="(item, index) in buySpecList" :key="index">
							<view class="t">
								{{ item.name }}
							</view>
							<view class="c u-flex u-col-center u-row-between">
								<view
									class="i"
									:class="{ on: index2 == item.sindex }"
									v-for="(item2, index2) in item.child"
									:key="index2"
									@click="buyNavChange(item, index, item2, index2)"
								>
									{{ item2 }}
									<!-- <text v-if="getBuySpecStore(item, index2) !== undefined" class="store-text"></text> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="total u-flex">
					购买总价
					<text>{{ buyTotal(buySpecList, buySpecTableList, buyType) }}</text>
					元
					
					<view class="" style="margin-left: 20rpx;">
						库存: {{ getBuySpecStore(item, index2) }}
					</view>
				</view>
				<view class="btn" @click="buySubmit">加入购物袋</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1, // 卖出-验货服务费类型：1-自家购买 2-别家购买
			show: false, // 卖出弹窗显示状态

			buyType: 1, // 购买-验货服务费类型：1-自家购买 2-别家购买
			buyShow: false, // 购买弹窗显示状态

			blist: [], // 轮播图/视频列表
			http: this.$imgUrl, // 图片基础路径
			content1: '', // 游戏说明内容
			content2: '', // 回收说明内容
			data: {
				title: '',
				sales_price: '',
				label_arr: [],
				image: '',
				mountings: null, // 配件列表
				is_receive_other: 0, // 是否支持别家购买回收
				content: '',
				images: '',
				video_file: '',
				specList: '',
				specTableList: '',
				sellSpecList: '',
				sellSpecTableList: ''
			},
			specList: [], // 卖出-规格列表（解析后）
			specTableList: [], // 卖出-规格价格表（解析后）
			buySpecList: [], // 购买-规格列表（解析后）
			buySpecTableList: [], // 购买-规格价格表（解析后）

			price1: '0', // 卖出-自家购买验货费
			price2: '0', // 卖出-别家购买验货费
			buyPrice1: '0', // 购买-自家购买验货费
			buyPrice2: '0', // 购买-别家购买验货费

			cart: [], // 购物车数据
			current: 0, // 轮播当前索引
			priceSums: 0, // 卖出-配件总扣减金额
			buyPriceSums: 0, // 购买-配件总扣减金额
			selectList: [], // 卖出-已选规格列表
			buySelectList: [], // 购买-已选规格列表
			id: '' // 商品ID
		};
	},

	computed: {
		// 计算卖出时预计可获得金额
		total() {
			return (specList, specTableList, type) => {
				if (!specList.length || !specTableList.length) return '0.00';
				const selectedSpecs = specList.map((item) => item.child[item.sindex] || '');
				const targetSpec = specTableList.find((item) => item.value.toString() === selectedSpecs.toString());
				if (!targetSpec) return '0.00';
				const mountingsDeduct = this.data.mountings ? this.data.mountings.filter((item) => item.active).reduce((prev, cur) => prev + Number(cur.intro || 0), 0) : 0;
				this.priceSums = mountingsDeduct;
				const finalPrice = Number(targetSpec.sales_price || 0) - Number(type === 1 ? this.price1 : this.price2) - mountingsDeduct;
				return finalPrice.toFixed(2);
			};
		},
		// 计算购买时总价 (保留传入参数，但使用更清晰的命名)
		buyTotal() {
			// 将参数名从 specTableList 修改为 buySpecTableList，明确其用途
			return (buySpecList, buySpecTableList, type) => {
				if (!buySpecList.length || !buySpecTableList.length) return '0.00';
				const selectedSpecs = buySpecList.map((item) => item.child[item.sindex] || '');
				// 现在逻辑非常清晰：使用传入的购买规格价格表
				const targetSpec = buySpecTableList.find((item) => item.value.toString() === selectedSpecs.toString());
				if (!targetSpec) return '0.00';
				const mountingsDeduct = this.data.mountings ? this.data.mountings.filter((item) => item.buyActive).reduce((prev, cur) => prev + Number(cur.intro || 0), 0) : 0;
				this.buyPriceSums = mountingsDeduct;
				// 购买价格计算逻辑
				const finalPrice = Number(targetSpec.sell_price || 0) + Number(type === 1 ? this.buyPrice1 : this.buyPrice2) - mountingsDeduct;
				return finalPrice.toFixed(2);
			};
		}
	},

	onLoad(options) {
		my.setNavigationBar({ frontColor: '#000', backgroundColor: '#fff' });
		this.id = options.id || '';
		this.cart = uni.getStorageSync('cart') || [];
		if (!uni.getStorageSync('token')) {
			this.login().then(() => this.initData());
		} else {
			this.initData();
		}
	},

	methods: {
		getBuySpecStore(specItem, optionIndex) {
		  // 创建临时的规格选择数组：基于当前已选择的规格，但将当前规格修改为正在查看的选项
		  const tempSelectedSpecs = this.buySpecList.map((item, index) => {
		    if (item === specItem) {
		      // 如果是当前正在查看的规格项，使用传入的选项索引
		      return item.child[optionIndex] || '';
		    } else {
		      // 其他规格保持当前已选择的选项
		      return item.child[item.sindex] || '';
		    }
		  });
		  // 在规格价格表中查找完全匹配的规格组合
		  const targetSpec = this.buySpecTableList.find(item => {
		    // 确保两个数组的字符串表示相同
		    return item.value.toString() === tempSelectedSpecs.toString();
		  });
		  // 返回库存，如果没有找到或库存为null/undefined，返回0
		  return targetSpec ? (targetSpec.sell_store || 0) : 0;
		},
		async initData() {
			try {
				const [systemRes, productRes] = await Promise.all([this.$http.post('/api/index/systemConfig'), this.$http.post('/api/product/detail', { id: this.id })]);
				if (systemRes.code === 1) this.content2 = systemRes.data.receive_info || '';
				else uni.showToast({ title: systemRes.msg || '系统配置获取失败', icon: 'none' });
				if (productRes.code === 1) this.handleProductData(productRes.data);
				else uni.showToast({ title: productRes.msg || '商品详情获取失败', icon: 'none' });
			} catch (err) {
				console.error('数据初始化失败：', err);
				uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
			}
		},

		handleProductData(productData) {
			this.data = { ...this.data, ...productData };
			this.handleBannerList(productData);

			// 处理配件数据，为购买和卖出分别初始化状态
			if (productData.mountings) {
				this.data.mountings = JSON.parse(productData.mountings).map((item) => ({
					...item,
					active: false, // 用于卖出
					buyActive: false // 用于购买
				}));
			}

			// 处理【卖出】规格数据
			this.handleSpecData(productData);

			// 处理【购买】规格数据
			if (productData.sellSpecList) {
				this.buySpecList = JSON.parse(productData.sellSpecList).map((item) => ({ ...item, sindex: 0 }));
			} else {
				this.buySpecList = [];
			}
			if (productData.sellSpecTableList) {
				this.buySpecTableList = JSON.parse(productData.sellSpecTableList);
			} else {
				this.buySpecTableList = [];
			}
			this.buySelectList = this.buySpecList.map((item) => item.child[0] || '');
			if (this.buySpecTableList.length > 0) {
				this.buyPrice1 = this.buySpecTableList[0].my_dec_price || '0';
				this.buyPrice2 = this.buySpecTableList[0].ta_dec_price || '0';
			}

			this.content1 = productData.content || '';
		},

		handleBannerList(productData) {
			const imageList = productData.images ? productData.images.split(',').map((url) => ({ url, type: 'image' })) : [];
			this.blist = productData.video_file ? [{ url: productData.video_file, type: 'video' }, ...imageList] : imageList;
		},

		handleSpecData(productData) {
			this.specList = productData.specList ? JSON.parse(productData.specList).map((item) => ({ ...item, sindex: 0 })) : [];
			this.specTableList = productData.specTableList ? JSON.parse(productData.specTableList) : [];
			this.selectList = this.specList.map((item) => item.child[0] || '');
			if (this.specTableList[0]) {
				this.price1 = this.specTableList[0].my_dec_price || '0';
				this.price2 = this.specTableList[0].ta_dec_price || '0';
			}
		},

		login() {
			return new Promise((resolve, reject) => {
				uni.login({
					provider: 'alipay',
					success: (loginRes) => {
						this.$http
							.post('/api/user/getAliUserIdByCode', { code: loginRes.authCode })
							.then((res) => {
								if (res.code === 1) {
									uni.setStorageSync('token', res.data.userinfo.token);
									uni.setStorageSync('userId', res.data.userinfo.user_id);
									uni.setStorageSync('loginTime', new Date().getTime());
									uni.showToast({ title: '登录成功', icon: 'none', duration: 1500 });
									resolve();
								} else {
									uni.showToast({ title: res.msg || '登录失败', icon: 'none' });
									reject(res.msg);
								}
							})
							.catch((err) => {
								console.error('登录接口请求失败：', err);
								reject(err);
							});
					},
					fail: (err) => {
						console.error('获取authCode失败：', err);
						uni.showToast({ title: '登录授权失败', icon: 'none' });
						reject(err);
					}
				});
			});
		},

		swiperChange(e) {
			this.current = e.detail.current;
		},
		scrollChange(index) {
			this.current = index;
		},
		showSharePanel() {
			my.showSharePanel();
		},

		onShareAppMessage() {
			return {
				title: this.data.title || '优质商品推荐',
				desc: this.data.label_arr.join('、') || '快来看看吧',
				path: `pages/index/goods?id=${this.id}`,
				success: (res) => console.log('分享成功：', res),
				fail: (res) => console.log('分享失败：', res)
			};
		},

		// ---- 卖出弹窗相关方法 ----
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		changMountings(item) {
			if (item) item.active = !item.active;
		},
		changeType(type) {
			this.type = type;
		},
		navChange(item, specIndex, specValue, valueIndex) {
			this.specList[specIndex].sindex = valueIndex;
			this.selectList[specIndex] = specValue;
			const targetSpec = this.specTableList.find((item) => item.value.join() === this.selectList.join());
			if (targetSpec) {
				this.price1 = targetSpec.my_dec_price || '0';
				this.price2 = targetSpec.ta_dec_price || '0';
			}
			this.$forceUpdate();
		},
		generateProductKey(item) {
			// 包含：商品ID + 类型 + 规格 + 配件选择 + 验货服务类型
			const mountingsKey = item.mountings_text
				? item.mountings_text
						.map((m) => m.title)
						.sort()
						.join(',')
				: '';
			const specKey = item.spec ? item.spec.sort().join(',') : '';
			return `${item.id}_${item.product_type}_${specKey}_${mountingsKey}_${item.type}`;
		},
		submit() {
			if (this.data.mountings && this.data.mountings.filter((item) => item.active).length === 0) {
				return uni.showToast({ title: '请选择配件', icon: 'none' });
			}
			const selectedSpecs = this.specList.map((item) => item.child[item.sindex] || '');
			const targetSpec = this.specTableList.find((item) => item.value.toString() === selectedSpecs.toString());
			if (!targetSpec) {
				return uni.showToast({ title: '请选择完整规格', icon: 'none' });
			}

			const selectedMountings = this.data.mountings ? this.data.mountings.filter((item) => item.active) : [];

			const cartItem = {
				title: this.data.title,
				id: this.id,
				spec: selectedSpecs,
				price: targetSpec.sales_price || '0',
				mountings_price: this.priceSums,
				num: 1,
				type: this.type,
				product_type: 'recycle',
				mountings_text: selectedMountings,
				deduct_price: this.type === 1 ? this.price1 : this.price2,
				image: this.data.image
			};

			// 修复：完整判断商品是否相同
			const existIndex = this.cart.findIndex((item) => {
				// 基础条件：商品ID和类型相同
				if (item.id !== this.id || item.product_type !== 'recycle') return false;

				// 规格必须完全相同
				if (!this.isArrEqual3(item.spec, selectedSpecs)) return false;

				// 配件选择必须完全相同
				const itemMountings = item.mountings_text
					? item.mountings_text
							.map((m) => m.title)
							.sort()
							.join(',')
					: '';
				const currentMountings = selectedMountings
					.map((m) => m.title)
					.sort()
					.join(',');
				if (itemMountings !== currentMountings) return false;

				// 验货服务类型必须相同
				if (item.type !== this.type) return false;

				return true;
			});

			if (existIndex > -1) {
				this.cart[existIndex].num++;
				uni.showToast({ title: '商品数量已增加', icon: 'success' });
			} else {
				this.cart.push(cartItem);
				uni.showToast({ title: '已添加到回收袋', icon: 'success' });
			}

			uni.setStorageSync('cart', this.cart);
			this.close(); // 关闭弹窗
			// 可以延迟跳转，让用户看到提示
			setTimeout(() => {
				uni.switchTab({ url: '/pages/index/cart' });
			}, 1500);
		},

		// ---- 购买弹窗相关方法 ----
		buyOpen() {
			this.buyShow = true;
		},
		buyClose() {
			this.buyShow = false;
		},
		buyChangMountings(item) {
			if (item) item.buyActive = !item.buyActive;
		},
		buyChangeType(type) {
			this.buyType = type;
		},
		buyNavChange(item, specIndex, specValue, valueIndex) {
			this.buySpecList[specIndex].sindex = valueIndex;
			this.buySelectList[specIndex] = specValue;
			const targetSpec = this.buySpecTableList.find((item) => item.value.join() === this.buySelectList.join());
			if (targetSpec) {
				this.buyPrice1 = targetSpec.my_dec_price || '0';
				this.buyPrice2 = targetSpec.ta_dec_price || '0';
				if (targetSpec.sell_store !== undefined && targetSpec.sell_store <= 0) {
					// uni.showToast({
					// 	title: '该规格商品库存不足',
					// 	icon: 'none',
					// 	duration: 2000
					// });
				}
			}
			this.$forceUpdate();
		},
		buySubmit() {
			const selectedSpecs = this.buySpecList.map((item) => item.child[item.sindex] || '');
			const targetSpec = this.buySpecTableList.find((item) => item.value.toString() === selectedSpecs.toString());
			if (!targetSpec) {
				return uni.showToast({ title: '请选择完整规格', icon: 'none' });
			}
			if (targetSpec.sell_store !== undefined && targetSpec.sell_store <= 0) {
				return uni.showToast({
					title: '该规格商品库存不足，无法购买',
					icon: 'none',
					duration: 2000
				});
			}

			const selectedMountings = this.data.mountings ? this.data.mountings.filter((item) => item.buyActive) : [];

			const cartItem = {
				title: this.data.title,
				id: this.id,
				express:this.data.express,
				spec: selectedSpecs,
				price: targetSpec.sell_price || '0',
				mountings_price: this.buyPriceSums,
				num: 1,
				type: 'buy',
				product_type: 'buy',
				mountings_text: selectedMountings,
				deduct_price: this.buyType === 1 ? this.buyPrice1 : this.buyPrice2,
				image: this.data.image,
				store: targetSpec.sell_store
			};

			// 修复：完整判断商品是否相同
			const existIndex = this.cart.findIndex((item) => {
				// 基础条件：商品ID和类型相同
				if (item.id !== this.id || item.product_type !== 'buy') return false;

				// 规格必须完全相同
				if (!this.isArrEqual3(item.spec, selectedSpecs)) return false;

				// 配件选择必须完全相同
				const itemMountings = item.mountings_text
					? item.mountings_text
							.map((m) => m.title)
							.sort()
							.join(',')
					: '';
				const currentMountings = selectedMountings
					.map((m) => m.title)
					.sort()
					.join(',');
				if (itemMountings !== currentMountings) return false;

				// 验货服务类型必须相同
				if (item.type !== this.buyType) return false;

				return true;
			});

			const currentNum = existIndex > -1 ? this.cart[existIndex].num + 1 : 1;

			if (targetSpec.sell_store !== undefined && currentNum > targetSpec.sell_store) {
				return uni.showToast({
					title: `库存不足，最多可购买${targetSpec.sell_store}件`,
					icon: 'none',
					duration: 2000
				});
			}

			if (existIndex > -1) {
				this.cart[existIndex].num++;
				uni.showToast({ title: '商品数量已增加', icon: 'success' });
			} else {
				this.cart.push(cartItem);
				uni.showToast({ title: '已添加到购物袋', icon: 'success' });
			}

			uni.setStorageSync('cart', this.cart);
			this.buyClose();
			// 可以延迟跳转，让用户看到提示
			setTimeout(() => {
				uni.switchTab({ url: '/pages/index/cart' });
			}, 500);
		},

		isArrEqual3(arr1, arr2) {
			if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
			if (arr1.length !== arr2.length) return false;
			// 深度比较数组内容
			return JSON.stringify(arr1) === JSON.stringify(arr2);
		}
	}
};
</script>

<style lang="less" scoped>
@color: #e31d21;

.container {
	padding-bottom: 120rpx;

	.pop-buy {
		padding: 30rpx 30rpx 0;
		height: 800rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			height: 60rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			padding-right: 40rpx;
		}

		.total {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			color: #333;
			text-align: left;
			font-size: 28rpx;

			text {
				color: @color;
				padding: 0 10rpx;
			}
		}

		.list {
			width: 100%;
			height: 1rpx;
			flex: 1;
			margin-top: 30rpx;

			.scroll-Y {
				width: 100%;
				height: 100%;
			}

			.item {
				margin-bottom: 20rpx;

				.t {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
				}

				.c {
					flex-wrap: wrap;

					.i {
						margin-top: 20rpx;
						width: calc(50% - 20rpx);
						line-height: 50rpx;
						border: 2rpx solid #eee;
						background-color: #f9f9f9;
						text-align: center;
						font-size: 24rpx;
						border-radius: 6rpx;
					}

					.on {
						border: 2rpx solid;
						background-color: #fef0f0;
						border-color: #fde2e2;
						color: #f56c6c !important;
					}
				}
			}
		}

		.btn {
			margin-top: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			width: 50%;
			text-align: center;
			background-color: @color;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.banner-bottom {
		width: 100%;
		height: 100rpx;

		.scroll-view_H {
			width: 100%;
			height: 100rpx;
			white-space: nowrap;

			.item {
				width: 25%;
				height: 100rpx;
				display: inline-flex;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.on {
				image {
					filter: blur(4rpx);
				}
			}
		}
	}

	.mian {
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;

		.title-price {
			.l {
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
				line-height: 50rpx;
			}

			.r {
				font-size: 28rpx;
				color: @color;
				font-weight: 600;
			}
		}

		.tips {
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			text {
				display: inline-flex;
				height: 30rpx;
				line-height: 30rpx;
				border: 2rpx solid #eee;
				border-radius: 6rpx;
				padding: 0 10rpx;
				font-size: 24rpx;
				color: #666;
				margin: 10rpx 10rpx 0 0;
			}
		}

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			height: 60rpx;
			line-height: 60rpx;
		}

		.body {
			margin-top: 20rpx;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 30rpx 0 40rpx;
		background-color: #fff;
		z-index: 999;
		height: 80rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.l {
			flex: 1;
			width: 1rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 30rpx;
			}
		}

		.r {
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: @color;
			border-radius: 30rpx;
		}
	}
}

.banner {
	width: 100%;
	height: 450rpx;
	overflow: hidden;

	.swiper {
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}

			video {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
